<template>
  <div class="replacecard">
    <!-- 原卡号 -->
    <div class="cardOrder">
      <div class="contentcard" style="position:relative;">
        <span>原卡号</span>
        <input class="inp" maxlength="23" @input="ycardvalue = ycardvalue.replace(/[^\d]/g,'');" type="tel"
               placeholder="请输入16、19或20位卡号" v-model="ycardvalue">
        <img @click="ycardvalue='' " v-show="ycardvalue.length>0" src="../img/cc@2x.png" alt="">
      </div>
    </div>
    <!-- 新卡号 -->
    <div class="cardOrder">
      <div class="contentcard">
        <span>新卡号</span>
        <input class="inp" maxlength="23" @input="newCardValue = newCardValue.replace(/[^\d]/g,'');"
               placeholder="请输入16、19或20位卡号" type="tel" v-model="newCardValue">
        <img @click="newCardValue='' " v-show="newCardValue.length>0" src="../img/cc@2x.png" alt="">
      </div>
    </div>
    <!-- 证件类型 -->
    <div class="cardOrder" style="margin-top:0.32rem;">
      <div class="contentcard" @click="showPopup" style="position:relative;">
        <span>证件类型</span>
        <p class="certificate">身份证</p>
        <img class="xh" src="../img/icon.png" alt="">
      </div>
    </div>
    <!-- 证件号 -->
    <div class="cardOrder">
      <div class="contentcard" style="position:relative;">
        <span>证件号</span>
        <input class="inp" maxlength="18" @input="certificate" placeholder="请输入身份证号码" type="text" v-model="IdNumder">
        <img @click="IdNumder='' " v-show="IdNumder.length>0" src="../img/cc@2x.png" alt="">
      </div>
    </div>
    <!-- 手机号 -->
    <div class="cardOrder">
      <div class="contentcard">
        <span>手机号</span>
        <input class="inp" maxlength="11" @input="phoneNumber = phoneNumber.replace(/[^\d]/g,'');"
               placeholder="请输入绑定的手机号" type="tel" v-model="phoneNumber">
        <img @click="phoneNumber='' " v-show="phoneNumber.length>0" src="../img/cc@2x.png" alt="">
      </div>
    </div>
    <!-- 支付密码 -->
    <div class="cardOrder" style="margin-top:0.32rem;">
      <div class="contentcard">
        <span>支付密码</span>
        <input class="inp" style="padding-left:0rem " @click='clickLink' readonly='readonly' type="Password"
               name="passwd" placeholder='请输入支付密码' id="encodPasswd">
        <img v-show="lent*1>0" @click="close" src="../img/cc@2x.png" alt="">
      </div>
    </div>
    <div :class="pitch?'btns':'nextStep'" @click="buts">
      下一步
    </div>
    <!-- 弹框 -->
    <div v-if="shadeOpen" class="shade">
      <div class="backcolor">
        <h3>提示</h3>
        <p>确认提交换卡信息？</p>
        <div class="butndiv">
          <div class="qxbut" @click="shadeOpen=false">取消</div>
          <div class="qrbut" @click="confirm">确认</div>
        </div>
      </div>
    </div>
    <!-- 证件类型选择 -->
    <van-popup v-model="show" duration='0.2' position="bottom">
      <div class="certifis">
        <div class="cont">身份证</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue';
import {Toast} from 'vant';

Vue.use(Toast);
export default {
  data() {
    return {
      ycardvalue: '',//原卡号
      newCardValue: '',//新卡号
      IdNumder: '',//证件号
      phoneNumber: '',//手机号
      Passwords: '',//输入的密码
      random: '',//随机数
      lent: 0,//长度
      shadeOpen: false,//遮罩
      show: false,
    }
  },
  computed: {
    pitch: function () {
      if (this.ycardvalue.length >= 16 && this.newCardValue.length >= 16 && this.IdNumder.length >= 15 && this.phoneNumber.length == 11 && this.lent == 6) {
        return true
      } else {
        return false
      }
    },
    //换卡
    nums: function () {
      if (this.cardNumber.length >= 16 && this.cardNumber1.length >= 16 && this.cardNumber2.length >= 15 && this.cardNumber3.length == 11 && this.n == 6) {

        return true;
      } else {
        return false;
      }
    },
  },
  mounted() {
    BmacJSBridge.call('YKTSafeControlClearPassword', {keyboardId: 'encodPasswd'});
    let _this = this
    document.addEventListener('YKTSafeControlChangeValue', (e) => {
      if (e.data.keyboardId == 'encodPasswd') {
        let text = e.data.text;
        let field = document.getElementById('encodPasswd');
        field.value = text;
        _this.Passwords = e.data.password;
        _this.random = e.data.randomKey
        _this.lent = e.data.length
      }

    }, false);

  },
  methods: {
    confirm() {//确认
      let embedding = {
        eventID: "confirmChangecard",
        extra: {
          name: "企业员工卡换卡-下一步"
        },
      };
      BmacJSBridge.call("AddEventburyPoints", embedding, (data) => {
      })
      let date = {
        ycardvalue: this.ycardvalue,//原卡号
        newCardValue: this.newCardValue,//新卡号
        IdNumder: this.IdNumder,//证件号
        phoneNumber: this.phoneNumber,//手机号
        Passwords: this.Passwords,//输入的密码
        random: this.random,//随机数
      }

      this.$router.push({path: '/sendSms', query: {id: 1, data: JSON.stringify(date)}})

    },
    buts() {//下一步
      // this.shadeOpen=true
      // if(this.pitch){
      //   this.shadeOpen=true
      // }
      if (this.pitch) {
        if (this.newCardValue.length == 16 || this.newCardValue.length == 19 || this.newCardValue.length == 20 || this.newCardValue.length == 23) {
          if (this.ycardvalue.length == 16 || this.ycardvalue.length == 19 || this.ycardvalue.length == 20 || this.ycardvalue.length == 23) {
            if (/^31|10/.test(this.newCardValue) && /^31|10/.test(this.ycardvalue)) {
              // if (/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/.test(this.IdNumder)) {
              if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.IdNumder)) {
                if (this.IdNumder.length == 15 || this.IdNumder.length == 18) {
                  if (this.phoneNumber.length == 11) {
                    if (this.lent == 6) {
                      console.log(this.lent)
                      this.shadeOpen = true
                    } else {
                      Toast("请输入正确密码");
                    }
                  } else {
                    Toast("请输入正确手机号");
                  }
                } else {
                  Toast("请输入正确证件号");
                }
              } else {
                Toast("请输入正确证件号");
              }
            } else {
              Toast("请输入正确卡号");
            }

          } else {
            Toast("请输入正确卡号");
          }
        } else {
          Toast("请输入正确卡号");
        }
        return
      } else {
        return
      }
    },
    showPopup() {
      this.show = true;

    },
    certificate(e) {//证件号校验
      let pattern = new RegExp("[^x|X|0-9]")
      console.log("证件", e.target.value)
      let str = e.target.value;
      let inputVal = "";
      for (var i = 0; i < str.length; ++i) {
        inputVal = inputVal + str.substr(i, 1).replace(pattern, '');
      }
      this.IdNumder = inputVal.replace(/[.]/g, '');
    },
   async clickLink(e) {//调密码键盘
      let tag = e.currentTarget.id
      let initInfo = await  this.getAPPConfigureInfo()
      BmacJSBridge.call('YKTSafeControlShow', {
        keyboardType: 0,//4-数字 其他
        passLength: 6,
        keyOrderType: 0,//0正常 1乱序 2切换乱序
        keyPressStype: 1,
        isShowToolBar: false,
        keyboardMode: true,//false 显示星号
        isDotDelay: true,
        isHasStatus: true,
        isEnablePaste: true,
        keyboardId: tag,
        isGuomi:initInfo.encryptControl == '01'? '1': '0'
      }, (data) => {
        // alert('GGG：'+JSON.stringify(data));
      });
    },
    /**
     * 获取引用初始化接口参数
     */
    getAPPConfigureInfo() {
      return new Promise((resolve, reject) => {
        BmacJSBridge.call("getAPPConfigureInfo", (data) => {
          resolve(data)
        })
      })
    },
    close() {//清空密码
      BmacJSBridge.call('YKTSafeControlClearPassword', {keyboardId: 'encodPasswd'}, (data) => {
      });
      let field = document.getElementById('encodPasswd');
      field.value = '';
    },
  },
  // beforeDestroy(){//组件销毁前
  //         BmacJSBridge.call('YKTSafeControlClearPassword',{keyboardId:'encodPasswd'},(data) => {
  //         });

  // },
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../common/stylus/mixin.styl';
.replacecard {
  height 100%;
  width 100%;

  .cardOrder {
    width 100%;
    height 1.04rem;
    background #ffffff;
    padding-left: 0.32rem;
    box-sizing: border-box;

    .contentcard {
      width 100%;
      height 1.04rem;
      display flex;
      align-items center;
      justify-content space-between;
      background #ffffff;
      padding-right: 0.32rem;
      box-sizing: border-box;

      .inp {
        height 1.04rem;
        flex 1;
        font-size 14px;
        outline: none;
        padding-left: 0.3rem
      }

      span {
        font-size 0.32rem;
        margin-right 0.3rem;
      }

      img {
        width 0.32rem;
        height 0.32rem;
      }

      .certificate {
        font-size 0.32rem;

        flex: 1;
      }

      .xh {
        height 0.16rem;
        width 0.24rem
      }
    }

    .contentcard:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0rem;
      background: #e6e6e6;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
  }

  .nextStep {
    background: #D9D9D9;
    border-radius: 4px;
    font-size 0.32rem;
    margin: 0 0.32rem;
    height 0.88rem;
    text-align center;
    line-height 0.88rem;
    margin-top: 0.32rem
    color #ffffff;
  }

  .btns {
    background: #008DEE;
    border-radius: 4px;
    font-size 0.32rem;
    margin: 0 0.32rem;
    height 0.88rem;
    text-align center;
    line-height 0.88rem;
    margin-top: 0.32rem
    color #ffffff;
  }

  .shade {
    position absolute;
    left 0;
    top: 0;
    width 100%;
    height 100%;
    background rgba(0, 0, 0, .3);
    display flex;
    justify-content center;
    align-items center;

    .backcolor {
      border-radius: 6px;
      width 80%;
      height 3.5rem;
      background: #ffffff;
      display flex;
      flex-direction column;

      h3 {
        font-size 18px;
        margin-top 0.4rem;

        text-align center;
      }

      p {
        flex 1;
        font-size 16px;
        text-align center;
        padding-top: 0.5rem;
      }

      .butndiv {
        height 1rem;
        display flex;
        // justify-content space-around;
        // align-items center;
        font-size 18px;
        position relative;
      }

      .qxbut {
        width 50%;
        display flex;
        justify-content center;
        align-items center;
        color: #999999
      }

      .qrbut {
        width 50%;
        display flex;
        justify-content center;
        align-items center;
        color: #008DEE;
        position relative
      }

      .butndiv:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0rem;
        background: #e6e6e6;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
      }

      .qrbut:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0rem;
        background: #e6e6e6;
        width: 1px;
        height: 100%;
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
      }
    }
  }
}

.certifis {
  height 2rem;
  padding: 0 0.32rem;

  .cont {
    font-size 14px;
    height: 1.04rem;
    text-align center;
    line-height 1.04rem;
    position relative
  }

  .cont:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0rem;
    background: #e6e6e6;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}
</style>
